<template>
    <div class="payment">
        <div class="payment-message">
            <span class="payment-title">订单支付成功</span>
            <price :value="payment.totalAmount" :size="42" color="#000" v-show="payment.totalAmount"/>
        </div>
        <div class="payment-award"/>
        <div class="payment-actions">
            <van-button round type="primary" @click="handleRouteToOrder">查看详情</van-button>
        </div>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import Price from "@/components/Price"
  import { Button, Toast } from "vant"
  import { payment } from "@mall/api-services"

  export default {
    name: "PaymentResult",
    components: {
      Price,
      [Button.name]: Button,
    },
    props: {
      id: String,
    },
    data() {
      return {
        payment: new payment.Payment(),
      }
    },
    computed: {},
    created() {
      this.refresh()
    },
    methods: {
      handleRouteToOrder() {
        const { payment: aPayment } = this
        const url = _.size(aPayment.orders) === 1 ? `/orders/${aPayment.orders[0].id}` : `/orders`
        this.$router.replace(url)
      },
      refresh() {
        const { id } = this
        Toast.loading()
        payment.PaymentServiceV1.getPayment(id)
          .then(aPayment => this.payment = aPayment)
          .finally(() => {
            Toast.clear()
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
    .payment {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: #fff;
        display: flex;
        flex-direction: column;

        .payment-message {
            display: flex;
            flex-direction: column;
            align-items: center;

            .payment-title {
                margin-top: 60px;
                margin-bottom: 20px;
            }
        }

        .payment-award {
            display: flex;
            padding: 0 24px;
            height: 153px;
            flex: 1;
            flex-direction: column;
            flex-flow: column nowrap;
        }

        .payment-actions {
            padding-bottom: 60px;
            background: #fff;
            text-align: center;
        }

    }
</style>
